<!--<template>-->
<!--  <div>-->
<!--    <input  v-bind:value="maskedValue" />-->
<!--    <i class="el-icon-view" v-on:click="togglePasswordVisibility"></i>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      isPassword: true,   //初始化隐藏-->
<!--      originalValue: "123456",   //初始化数值-->
<!--    };-->
<!--  },-->
<!--  computed: {-->

<!--    maskedValue() {-->
<!--      return this.isPassword ? "*".repeat(this.originalValue.length) : this.originalValue;-->
<!--    },-->
<!--  },-->
<!--  methods: {-->
<!--    togglePasswordVisibility() {-->
<!--      this.isPassword = !this.isPassword;-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->

<template>
  <div>
    <div>
      <el-button type="warning" plain v-on:click="toggleCardNumColumnVisibility">
        {{ showCardNumColumn ? "隐藏" : "显示" }}银行卡号
      </el-button>
    </div>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column
            prop="createTime"
            label="绑定日期"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="bankcardType"
            label="银行卡类型"
            width="180">
        </el-table-column>
        <el-table-column prop="cardId" label="银行卡号" :formatter="formatCardNum">
        </el-table-column>

        <el-table-column
            prop="bankType"
            label="银行类型"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Api from '@/api/cardsList'

export default {
  data() {
    return {
      showCardNumColumn: false,
      tableData: []
    }
  },
  computed: {
    formatCardNum() {
      let self = this;
      return function (row, column, cellValue) {
        if (!self.showCardNumColumn) {
          // 将银行卡号处理成****
          return cellValue.replace(/\d(?=\d{4})/g, "*");
        }
        return cellValue;
      };
    },
  },
  methods: {
    toggleCardNumColumnVisibility() {
      this.showCardNumColumn = !this.showCardNumColumn;
    },
    getAll() {
      Api.getAll().then(res => {
        console.log(res)
        this.tableData = res;
      })
    }
  },
  created() {
    this.getAll()
  }
}
</script>
